import routesMap from './routes/index'
import clientMaps from './routes/clientMaps'
import adminMaps from './routes/adminMaps'
import MainLayout from './layout/MainLayout/index'
import NotFound from './layout/NotFound/index'
import React, { useEffect, useState } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import { ConfigProvider } from "antd";
import zhCN from "antd/es/locale/zh_CN";


const App = () => {
  const [inRoutes, setInRoutes] = useState([]);
  const [outRoutes, setOutRoutes] = useState([]);
  const [isAuthenticated, setIsAuthenticated] = useState(false)

  useEffect(() => {

    const fetchRoutes = () => {
      // 内部
      let list = []
      adminMaps.forEach(v => {
        list.push(v);
        if (v.children && v.children.length !== 0) {
          v.children.forEach((i) => {
            list.push(i);
            if (i.children && i.children.length !== 0) {
              i.children.forEach((c) => {
                list.push(c);
              });
            }
          });
        }
      })
      clientMaps.forEach(v => {
        list.push(v);
        if (v.children && v.children.length !== 0) {
          v.children.forEach((i) => {
            list.push(i);
            if (i.children && i.children.length !== 0) {
              i.children.forEach((c) => {
                list.push(c);
              });
            }
          });
        }
      })
      setInRoutes(list)

      // 外部
      const outList = []
      routesMap.forEach(v => {
        if (v.path !== '/notFound') {
          outList.push(v)
        }
      })
      setOutRoutes(outList)


      if (localStorage.getItem('access_token')) {
        setIsAuthenticated(true)
      } else {
        setIsAuthenticated(false)
      }
    }
    fetchRoutes()
  }, [])

  const mainRoutes = () => {
    return (
      <Route>
        {inRoutes.map((route) => {
          let Component = React.lazy(route.component)
          return (
            <Route
              key={route.path}
              path={route.path}
              element={
                <React.Suspense>
                  <Component />
                </React.Suspense>
              }
            />
          );
        })}
      </Route>
    );
  }

  const outRouters = () => {
    return (
      <Route>
        {outRoutes.map((route) => {
          let Component = React.lazy(route.component)
          return (
            <Route
              key={route.path}
              path={route.path}
              element={
                !isAuthenticated ?
                  <React.Suspense>
                    <Component />
                  </React.Suspense>
                  : <Navigate to="/" />
              }
            />
          );
        })}
      </Route>
    );
  }

  return (
    <>
      <ConfigProvider locale={zhCN}>
        <Router>
          <Routes>
            <Route path="/"
              element={isAuthenticated ? <MainLayout /> : <Navigate to="/login" />}>
              {mainRoutes()}
            </Route>
            {outRouters()}
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Router>
      </ConfigProvider>
    </>
  )
}

export default App
